<template>
  <div class="layout-main">
    <div class="activate-company no-side-menu">
      <!-- 已激活 -->
      <div class="activated" v-if="activated">
        <a-result status="success" title="企业已激活">
          <template #extra>
            <c-button type="primary" @click="affirm">确认</c-button>
          </template>
        </a-result>
      </div>
      <!-- 未激活 -->
      <div class="unActivated" v-else>
        <p class="title fs-26 tc">
          企业激活
        </p>
        <c-steps v-model="current" :steps="steps" />
        <CompanyActivate
          v-if="current === 0 && companyData.companyName"
          :companyData="companyData"
          @success="companySuccess"
        />
        <CorporateActivate
          v-if="current === 1"
          :userAuthData="authData"
          @success="corporateSuccess"
        />
        <BackfillActivate
          v-if="current === 2 && authData.flowId"
          :userAuthData="authData"
          @success="backfillSuccess"
          @backTocCompany="backTocCompany"
        />
      </div>
    </div>
    <Face
      v-model="faceVisible"
      ref="face"
      :userData="{
        name: userData && userData.realName,
        id: userData && userData.residentId
      }"
    >
      <template v-slot:title>
        <a-alert
          show-icon
          type="warning"
          message="请先完成刷脸核身认证后再进行操作"
        ></a-alert>
      </template>
    </Face>
  </div>
</template>

<script>
import CompanyActivate from "@/views/authentication/components/company";
import CorporateActivate from "@/views/authentication/components/corporate";
import BackfillActivate from "@/views/authentication/components/backfill";
import Face from "@/components-business/face/face-container";
import cSteps from "@/components/steps";
import { getactivatecompany } from "@/api/activate";
import { getUserAuthstate } from "@/api/certify";
// import roleDict from "@/dict/role";
import { isLogin } from "@/util/auth";

export default {
  components: {
    Face,
    cSteps,
    CompanyActivate,
    CorporateActivate,
    BackfillActivate
  },
  data() {
    return {
      userData: undefined,
      companyData: {},
      current: 0,
      activated: false, // 企业是否激活
      faceVisible: false,
      steps: [
        {
          title: "企业认证"
        },
        {
          title: "对公账户认证"
        },
        {
          title: "回填金额"
        }
      ],
      authData: {} // 认证信息
    };
  },
  methods: {
    // 返回企业认证
    backTocCompany() {
      // 删除回填金额标识
      this.$storage.s_remove("activate_backfill");
      this.current = 0;
      this.authData = {};
    },
    // 企业四要素认证完成
    companySuccess(data) {
      this.authData = data;
      this.current = 1;
    },
    // 对公账户认证完成
    corporateSuccess(data) {
      this.$storage.s_set("activate_backfill", data.flowId);
      this.authData = data;
      this.current = 2;
    },
    // 回填金额完成
    backfillSuccess() {
      let _this = this;
      this.activated = true;
      this.$confirm({
        title: "温馨提示",
        content: "企业激活成功，请重新登录",
        onOk() {
          _this.$router.push({
            name: "login"
          });
        }
      });
    },
    // 确认，返回现货商城
    affirm() {
      this.$router.push({ name: "spotmall" });
    },
    // 刷脸成功回调
    faceSuccess() {
      this.faceVisible = false;
    },
    // 查询激活企业的信息
    queryCompanyInfo() {
      getactivatecompany({
        companyId: this.$route.query.id
      }).then(res => {
        this.companyData = res;
      });
    },
    // 是否有回填金额标志
    queryBackfillFlag() {
      let flag = this.$route.params.backfill;
      if (flag) {
        this.current = 2;
        this.authData = {
          flowId: flag
        };
        this.$storage.s_set("activate_backfill", flag);
      } else {
        let s_flag = this.$storage.s_get("activate_backfill");
        if (s_flag) {
          this.current = 2;
          this.authData = {
            flowId: s_flag
          };
        } else {
          this.queryCompanyInfo();
          this.current = 0;
        }
      }
    },
    init() {
      // 获取账号信息用于获取刷脸二维码
      getUserAuthstate().then(res => {
        // if (res.roleId === roleDict.unactivatesuper.value) {
        this.userData = res;
        this.faceVisible = true;
        this.queryBackfillFlag();
        // }
      });
    }
  },
  created() {
    // 带有personal参数说明从个人激活跳转过来，不需要再刷脸
    if (this.$route.query.personal) {
      this.queryCompanyInfo();
    } else {
      this.init();
    }
  },
  mounted() {
    // 刷新或关闭页面时提示
    window.onbeforeunload = function(e) {
      e = e || window.event;
      // 兼容IE8和Firefox 4之前的版本
      if (e) {
        e.returnValue = "确定重新加载/离开此页面？";
      }
      // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
      return "确定重新加载/离开此页面？";
    };
  },
  beforeRouteLeave(to, from, next) {
    if (isLogin()) {
      if (this.activated) {
        next();
      } else {
        this.$confirm({
          title: "温馨提示",
          content:
            "您还未完成企业激活流程，退出后可在个人中心-切换公司列表重新激活，是否确认离开?",
          onOk() {
            next();
          }
        });
      }
    } else {
      next();
    }
  },
  beforeDestroy() {
    // 清除刷新或关闭页面的监听
    window.onbeforeunload = null;
    // 删除继续认证标识
    this.$storage.s_remove("activate_backfill");
  }
};
</script>

<style lang="scss" scoped>
.ant-steps {
  margin: 0 auto;
  margin-bottom: 50px;
}
.unActivated {
  padding: 48px 32px;
  ::v-deep .form_wrapper {
    transform: translateX(-90px);
    width: 450px;
    margin: 0 auto;
  }
}
.activated {
  padding-top: 108px;
}
</style>
